<template>
	<!-- 生产调度 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">采煤作业统计</text></view>
				</template>
				<my-grid :list="list" :decimals="2" :col="2"></my-grid>
				<view class="fw m-t-10 tc"> 近30天采煤量趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="1" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">剥离作业统计</text></view>
				</template>
				<my-grid :list="list2" :decimals="2" :col="2"></my-grid>
				<view class="fw m-t-10 tc"> 近30天剥离趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">运输销售统计</text></view>
				</template>
				<my-grid :list="list3" :decimals="2" :col="2"></my-grid>
				<view class="fw m-t-10 tc"> 近30天销售趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts2" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">装车收矿统计</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '挖机'},{name: '1#破碎机'},{name: '2#破碎机'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<my-grid class="m-t-10" :list="list4" :col="2"></my-grid>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">穿孔爆破统计</text></view>
				</template>
				<my-grid :list="list5"></my-grid>
				<view class="fw m-t-10 tc"> 近30天钻孔进尺趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="6" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">煤仓储量统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="7" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">出勤统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData4" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7])
	const baseOpts = {
		padding: [10, 10, 0, 10],
		enableScroll: false,
		dataLabel: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			mix: 0
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			showTitle: true,
			data: [{
				min: 0,
				title: '万吨'
			}]
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: "hollow"
			}
		}
	}
	let list = ref([{ // 产销统计
			title: '日采煤量',
			value: '12',
			unit: '万t'
		}, {
			title: '月计划完成',
			value: '20.34',
			unit: '万t'
		}, {
			title: '月实际完成',
			value: '24.10',
			unit: '万t'
		}, {
			title: '月完成率',
			value: '0',
			unit: '%'
		}]),
		list2 = ref([{
			title: '日剥离量',
			value: '176',
			unit: '万m³'
		}, {
			title: '月实际完成',
			value: '120',
			unit: '万m³'
		}, {
			title: '月计划完成',
			value: '55',
			unit: '万m³'
		}, {
			title: '月完成率',
			value: '0',
			unit: '%'
		}]),
		list3 = ref([{
			title: '日进矿车数',
			value: '534',
			unit: '辆'
		}, {
			title: '日出矿车数',
			value: '241',
			unit: '辆'
		}, {
			title: '日销量',
			value: '5.34',
			unit: '万t'
		}, {
			title: '月累计销量',
			value: '20.41',
			unit: '万t'
		}]),
		list4 = ref([{
			title: '日挖机装载车数',
			value: '90',
			unit: '辆'
		}, {
			title: '日挖机装载总量',
			value: '190',
			unit: '万吨'
		}]),
		list5 = ref([{
			title: '日钻孔数',
			value: '16',
			unit: '个'
		}, {
			title: '日进尺数',
			value: '164.4',
			unit: 'm'
		}, {
			title: '月累计进尺',
			value: '988.3',
			unit: 'm'
		}, {
			title: '钻机台数',
			value: '3',
			unit: '台'
		}, {
			title: '爆破量',
			value: '578',
			unit: 'm³'
		}, {
			title: '爆破区间',
			value: '560',
			unit: '西采场'
		}]),
		list6 = ref([{
			title: '总储存量',
			value: '11.33',
			unit: '万吨'
		}, {
			title: '原煤',
			value: '4.4',
			unit: '万吨'
		}, {
			title: '沫煤',
			value: '3.3',
			unit: '万吨'
		}, {
			title: '二五籽',
			value: '5.24',
			unit: '万吨'
		}, {
			title: '三八快',
			value: '2.11',
			unit: '万吨'
		}]),
		chartData = ref({}),
		chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		chartData4 = ref({}),
		opts = {
			color: ["#5589FF"],
			...baseOpts
		},
		opts1 = {
			color: ["#5855FF"],
			...baseOpts
		},
		opts2 = {
			color: ["#FFAD55"],
			...baseOpts
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: true,
				position: 'bottom'
			},
			title: {
				name: "88",
				fontSize: 40,
				color: "#0853FF",
				offsetY: -5
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		}
	const getServerData = () => {
		setTimeout(() => {
			let res = {
				categories: ["8.1", "8.2", "8.5", "8.6", "8.9", "8.20"],
				series: [{
					name: "",
					setShadow: [
						3,
						8,
						10, "#FC8452"
					],
					data: [2, 8, 5, 7, 4, 2]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
			let res1 = {
				series: [{
					data: [{
						name: "原煤",
						value: 36,
						labelText: '原煤 36'
					}, {
						name: "沫煤",
						value: 30,
						labelText: '沫煤 30'
					}, {
						name: "二五仔",
						value: 16,
						labelText: '二五仔 16'
					}, {
						name: "三八快",
						value: 16,
						labelText: '三八快 16'
					}]
				}]
			};
			chartData3.value = JSON.parse(JSON.stringify(res1));
			let res2 = {
				series: [{
					data: [{
						name: "剥离队",
						value: 36,
						labelText: '剥离队 36'
					}, {
						name: "采煤队",
						value: 30,
						labelText: '采煤队 30'
					}, {
						name: "选煤长",
						value: 16,
						labelText: '选煤长 16'
					}]
				}]
			};
			chartData4.value = JSON.parse(JSON.stringify(res2));
		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
</style>